<template>
  <cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
    <el-row class="h-100" type="flex">
      <cl-biz-toolbar v-model="currBiz.biz_id" show-hq @change="bizChange" />
      <cl-flex1 class="h-100" style="overflow: hidden">
        <cl-pagefull @resize="onResize">
          <template #head>
            <el-row type="flex" class="pb-1">
              <div class="title">{{ currBiz.biz_name }}</div>
              <cl-flex1 />
              <div>
                <el-button icon="el-icon-plus" v-auth="'store_personneldepartment_add'" type="primary"
                  @click="openForm()" size="small">
                  新增部门
                </el-button>
              </div>
            </el-row>
          </template>
          <!-- 数据表格 -->
          <div class="h-100">
            <cl-table v-bind="table">
              <cl-empty slot="empty" />
              <template #column-status_name="{ scope: { row } }">
                <el-tag>{{ row.status_name }}</el-tag>
              </template>
              <template #column-opt="{ scope: { row } }">
                <div class="flex flex-align-start">
                    <el-button type="primary" v-if="row.post == 8"
                    @click="changeZg(row,1)">
                    分配主管
                  </el-button>
                  <el-button type="primary" v-if="row.post == 7" v-auth="'store_personneldepartment_edit'"
                    @click="changeManager(row)">
                    分配经理
                  </el-button>
                  <el-button type="primary" v-auth="'store_personneldepartment_edit'" @click="edit(row)">
                    修改
                  </el-button>
                  <el-button type="danger" v-if="row.copy && row.post != 8" v-auth="'store_personneldepartment_copy'" @click="copy(row)">
                    复制
                  </el-button>
                  <el-button v-auth="'store_personneldepartment_del'" @click="remove(row)">
                    删除
                  </el-button>
                </div>
              </template>
            </cl-table>
          </div>
        </cl-pagefull>
      </cl-flex1>
    </el-row>
    <dept-form ref="form" @confirm="refresh" />
    <allot-store-user ref="allot" @confirm="refresh" />
  </cl-crud>
</template>

<script>
// 门店表单
import DeptForm from "./components/dept-form";
//分配店长
import AllotStoreUser from "./components/store/allot-store-user";
export default {
  name: "CrmPersonnelDept",
  components: {
    DeptForm,
    AllotStoreUser
  },
  data() {
    return {
      // 表格配置
      table: {
        "context-menu": ["refresh"],
        props: {
          "row-key": "dept_id",
          "default-expand-all": false,
          maxHeight: 500
        },
        columns: [
          {
            label: "部门名称",
            prop: "dept_name",
            minWidth: 200,
            align: "left",
            showOverflowTooltip: true
          },
          { label: "部门类型", prop: "post_name", width: 100 },
          {
            label: "分公司",
            prop: "company_name",
            minWidth: 120,
            align: "left",
            showOverflowTooltip: true
          },
          { label: "部门状态", prop: "status_name", width: 100 },
          { label: "操作", prop: "opt", width: 250, fixed: "right" }
        ]
      },
      search: {
        showpage: 1
      },
      currBiz: {},
      load: false
    };
  },
  methods: {
    onResize(h) {
      this.table.props.maxHeight = h;
    },
    onLoad({ ctx, app }) {
      ctx.service(this.$service.dept).done();
      if (!this.load) return;
      app.refresh(this.search);
    },
    async onRefresh(params, { next, done, render }) {
      const { biz_id } = this.currBiz;
      let { list } = await next({
        ...params,
        biz_id
      });
      render(list);
    },
    // crud刷新
    refresh(biz_id) {
      biz_id && (this.currBiz.biz_id = biz_id);
      this.$refs.crud.refresh({ page: 1, ...this.search });
      this.load = true;
    },
    // 切换事业部
    bizChange(v) {
      this.currBiz = v;
      this.search.keyword = "";
      this.$nextTick(() => {
        this.refresh();
      });
    },
    openForm(type = "add", data) {
      this.$refs.form.open(type, data);
    },
    //复制
    copy(row) {
      this.openForm("copy", row);
    },
    //编辑
    edit(row) {
      this.openForm("edit", row);
    },
    // 删除
    remove({ dept_id }) {
      this.confirm()
        .then(async () => {
          await this.$service.dept.remove({ dept_id });
          this.$message.success("操作成功");
          this.refresh();
        })
        .catch(() => { });
    },
    changeManager(row) {
      console.log(row.post);
      this.$refs.allot.open(row);
    },
    changeZg(row,type){
       console.log(row.post);
      this.$refs.allot.open(row,type);
    }
  }
};
</script>
<style lang="scss" scoped>
.title {
  font-size: 18px;
}
</style>
